<!--我收到的咨询-->
<template>
	<view>
		<view class="c_xuan flex flex-row white">
			<view 
			v-for="(item,index) in category"
			:key="index"
			@click="tabsChange(item.name)" :class="[tabsTitleKey == item.name ? 'on' : '']" class="c_tablist"><text>{{ item.title }}</text></view>
		</view>


		<view class="mb-10 white px-24 pt-29 pb-36" v-for="(item, index) in list" :key="index">
			<view class="flex flex-row flex-row-center-start">
				<view class="c_kd rounded">
					<view class="flex flex-center">
						<view class="flex flex-center text-size-m text-white" style="width:62rpx;height:62rpx;border-radius: 50%;background:#e44279">{{ item.realname[0] }}</view>
					</view>
				</view>
				<view class="ml-17">
					<view class="text-size-m text-weight-b">{{ item.realname }}</view>
				</view>
				<view class="ml-18 c_rzimg flex flex-row flex-row-center-center">
					<tm-image :round="0" :width="89" :height="36" :src="getStatsImg(item.auth_state,item.auth_type)"></tm-image>

				</view>
			</view>
		    <view class="c_ml pt-20">
				<view class="text-size-g c_danhei">
					{{ item.content }}
				</view>
				<view class="pt-40 flex flex-row flex-row-center-start">
					<!-- <view class="c_hfbg text-blue text-size-s mr-19">回复</view> -->
					<view class="text-size-s c_wenhui">{{ formatTime(item.created_at) }}</view>
				</view>
				<view class="c_ckbg mt-26">
					<navigator :url="'/pages/user/xiangmuxiangqing?id='+item.detail_id+'&api='+detailApiName+'&keytype='+tabsTitleKey" class="flex flex-row flex-row-center-center">
						<view class="text-size-m text-blue">查看所有回复</view>
						<view class="ml-10">
							<tm-icon color="#0073FF" :line-height="0" :font-size="24" name="tmicon-arrow-right"></tm-icon>
						</view>
					</navigator>
				</view>
				
			</view>
			
		</view>


		<bl-list-layout 
		btn-color="white" 
		@restart-load="resetReq(true); getData()" 
		:status="status"
		:list-len="list.length">
		</bl-list-layout>
		
	</view>
</template>

<script lang="ts" setup>
import { ref,computed } from "vue"
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";
import { formatTime,formatTimeBystr } from "@/libs/util";
import { imgHost } from "@/libs/imgHost";

const { status, resetReq, actionHttp, list, setOptions,banner } = useReqList();
const category = [
	{ title: "需求", name: "demand" },
	{ title: "服务", name: "service" },
	{ title: "成果", name: "achieved" },
	{ title: "投资", name: "investment" },
	{ title: "团队", name: "team" },
	{ title: "融资", name: "financing" },
]

const tabsTitleKey = ref("demand")//1全部,2通知,3热点新闻,4热门专题

const detailApiName = computed(()=>{
	if(tabsTitleKey.value == 'achieved') return 'achievedDetail'
	if(tabsTitleKey.value == 'service') return 'serviceDetail'
	if(tabsTitleKey.value == 'demand') return 'demandDetail'
	if(tabsTitleKey.value == 'investment') return 'financingDetail'
	if(tabsTitleKey.value == 'team') return 'teamDetail'
	if(tabsTitleKey.value == 'financing') return 'financingDetail'
	return 'achievedDetail'
})

const getStatsImg = computed(()=>{
	return (status:boolean,type:number)=>{
		if(type==1) return status?imgHost("c_a1.png"):imgHost("c_a0.png");
		if(type==2) return status?imgHost("c_e1.png"):imgHost("c_e0.png");
		if(type==3) return status?imgHost("c_d1.png"):imgHost("c_d0.png");
		if(type==4) return status?imgHost("c_c1.png"):imgHost("c_c0.png");
		if(type==5) return status?imgHost("c_b1.png"):imgHost("c_b0.png");
		return imgHost("c_w.png");
	}
})

function tabsChange(key: string) {
	tabsTitleKey.value = key;
	resetReq(true);
	getData()

}


onLoad(async () => {
	getData()
})

onPullDownRefresh(() => {
	if (status.isLoading) {
		uni.stopPullDownRefresh();
		return
	}
	resetReq(true);
	getData()
})
onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getData()
})

function getData() {
	uni.showLoading({ title: "...", mask: true })
	actionHttp(apiUr.getZhiXuncommentList(), { type: tabsTitleKey.value }).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
	})
}

</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style lang="less" scoped>
	.c_xuan {
		gap: 12rpx;
		justify-content: space-around;
		height: 64rpx;
		margin-bottom: 16rpx;
		padding-bottom: 15rpx;
	
		.c_tablist {
			font-size: 30rpx;
			color: #484848;
			height: 100%;
			padding: 0 24rpx;
			text {
				display: block;
				position: relative;
				height: 100%;
			}
	
			&.on {
				color: #0073FF;
				font-weight: bold;
			}
	
			&.on text::after {
				content: " ";
				display: block;
				position: absolute;
				width: 100%;
				height: 2px;
				border-radius: 2px;
				background-color: #0073FF;
				left: 0;
				bottom: 0;
			}
		}
	}
	.c_kd{
		width: 62rpx;
		height: 62rpx;
		background: #D8D8D8;
		overflow: hidden;
	}
	.c_rzimg{
		height: 54rpx;
	}
	.c_ml{
		margin-left:68rpx;
	}
	.c_hfbg{
		background: #F7F7F7;
		text-align: center;
		border-radius: 16rpx;
		padding:11rpx 22rpx;
	}
	.c_ckbg{
		background: #F7F7F7;
		width: 632rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 16rpx;
	}
</style>